<template>
  <div class="order-management">
    <h2>订单列表</h2>
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-table :data="orderList" border stripe style="width: 100%; margin-top: 20px;">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="orderNo" label="订单编号"></el-table-column>
      <el-table-column prop="purchaseTime" label="购买时间"></el-table-column>
      <el-table-column prop="purchaser" label="购买人"></el-table-column>
      <el-table-column prop="totalPrice" label="订单总价格"></el-table-column>
      <el-table-column prop="status" label="订单状态">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="handleViewDetail(scope.row)">查看详情</el-button>
          <el-button 
            type="text" 
            :disabled="scope.row.status !== '待发货'" 
            @click="handleDeliver(scope.row)"
          >{{ scope.row.status === '待发货' ? '发货' : '待付款' }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="pagination"
    >
    </el-pagination>

    <el-dialog title="查看详情" v-model="detailDialogVisible" width="60%">
      <div v-if="selectedOrder" class="order-detail">
        <p>订单编号: {{ selectedOrder.orderNo }}</p >
        <p>购买人: {{ selectedOrder.purchaser }}</p >
        <p>购买时间: {{ selectedOrder.purchaseTime }}</p >
        <p>订单总价格: {{ selectedOrder.totalPrice }}</p >
        <p>订单状态: 
          <el-tag :type="getStatusTagType(selectedOrder.status)">{{ selectedOrder.status }}</el-tag>
        </p >
        <el-table :data="selectedOrder.goodsList" border stripe style="width: 100%; margin-top: 20px;">
          <el-table-column prop="goodsId" label="商品ID"></el-table-column>
          <el-table-column label="商品图片">
            <template #default="scope">
              < img :src="scope.row.goodsImage" alt="商品图片" style="width: 60px; height: 60px;">
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名称"></el-table-column>
          <el-table-column prop="goodsCount" label="商品数量"></el-table-column>
          <el-table-column prop="goodsPrice" label="商品单价"></el-table-column>
          <el-table-column prop="goodsTotalPrice" label="商品总价格"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  setup() {
    // 订单列表数据
    const orderList = ref([]);
    // 当前页码、每页条数、总条数
    const currentPage = ref(1);
    const pageSize = ref(5);
    const total = ref(30);
    // 详情弹窗显示状态、选中的订单
    const detailDialogVisible = ref(false);
    const selectedOrder = ref(null);

    // 模拟订单数据
    const mockOrderData = [
      {
        id: 1795,
        orderNo: 'gm2025092715345735751',
        purchaseTime: '2025-09-27 15:09:57',
        purchaser: '梁',
        totalPrice: 17,
        status: '待发货',
        goodsList: [
          {
            goodsId: 821,
            goodsImage: 'https://example.com/dabaitu.jpg',
            goodsName: '大白兔奶糖',
            goodsCount: 1,
            goodsPrice: 17,
            goodsTotalPrice: 17
          }
        ]
      },
      {
        id: 1794,
        orderNo: 'gm2025092608441965699',
        purchaseTime: '2025-09-26 08:09:19',
        purchaser: '梁',
        totalPrice: 159,
        status: '待付款',
        goodsList: [
          {
            goodsId: 822,
            goodsImage: 'https://example.com/snack.jpg',
            goodsName: '零食大礼包',
            goodsCount: 3,
            goodsPrice: 53,
            goodsTotalPrice: 159
          }
        ]
      },
      {
        id: 1793,
        orderNo: 'gm2025091719354015774',
        purchaseTime: '2025-09-17 19:09:40',
        purchaser: '赵先生',
        totalPrice: 16,
        status: '待发货',
        goodsList: [
          {
            goodsId: 823,
            goodsImage: 'https://example.com/candy.jpg',
            goodsName: '水果糖',
            goodsCount: 2,
            goodsPrice: 8,
            goodsTotalPrice: 16
          }
        ]
      },
      {
        id: 1792,
        orderNo: 'gm202509171622125301',
        purchaseTime: '2025-09-17 16:09:12',
        purchaser: '赵先生',
        totalPrice: 159,
        status: '待付款',
        goodsList: [
          {
            goodsId: 824,
            goodsImage: 'https://example.com/chocolate.jpg',
            goodsName: '巧克力礼盒',
            goodsCount: 1,
            goodsPrice: 159,
            goodsTotalPrice: 159
          }
        ]
      },
      {
        id: 1791,
        orderNo: 'gm2025091609345019753',
        purchaseTime: '2025-09-16 09:09:50',
        purchaser: '大漂亮',
        totalPrice: 17,
        status: '待发货',
        goodsList: [
          {
            goodsId: 825,
            goodsImage: 'https://example.com/dabaitu.jpg',
            goodsName: '大白兔奶糖',
            goodsCount: 1,
            goodsPrice: 17,
            goodsTotalPrice: 17
          }
        ]
      }
    ];

    // 获取订单列表（模拟）
    const getOrderList = () => {
      // 这里模拟分页，实际开发中是从接口获取对应页码数据
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      orderList.value = mockOrderData.slice(start, end);
    };

    // 页面加载时获取订单列表
    onMounted(() => {
      getOrderList();
    });

    // 处理页码大小改变
    const handleSizeChange = (val) => {
      pageSize.value = val;
      currentPage.value = 1;
      getOrderList();
    };

    // 处理页码改变
    const handleCurrentChange = (val) => {
      currentPage.value = val;
      getOrderList();
    };

    // 处理查看详情
    const handleViewDetail = (row) => {
      selectedOrder.value = row;
      detailDialogVisible.value = true;
    };

    // 处理发货
    const handleDeliver = (row) => {
      // 实际开发中这里会调用发货接口
      ElMessage.success(`订单 ${row.orderNo} 发货成功`);
      // 模拟发货后状态改变
      row.status = '已发货';
    };

    // 获取状态标签类型
    const getStatusTagType = (status) => {
      if (status === '待发货') {
        return 'info';
      } else if (status === '待付款') {
        return 'warning';
      } else if (status === '已发货') {
        return 'success';
      }
      return '';
    };

    return {
      orderList,
      currentPage,
      pageSize,
      total,
      detailDialogVisible,
      selectedOrder,
      handleSizeChange,
      handleCurrentChange,
      handleViewDetail,
      handleDeliver,
      getStatusTagType
    };
  }
};
</script>

<style scoped>
.order-management {
  padding: 20px;
}
.breadcrumb {
  margin-bottom: 10px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
.order-detail p {
  margin-bottom: 10px;
}
</style>